<template>
	<view id="video">
 		<u-collapse
			@change="change"
			@close="close"
			@open="open"
			:value="0"
			accordion
			v-for="(pro, index) in showVideoList"
			v-if="pro.deviceList.length != 0"
			:key="index"
		>
			<u-collapse-item :title="pro.projectName">
				<view
					class="u-page-list"
					v-for="(item, i) in pro.deviceList"
					:key="i"
					@click="toVideo(item.videoUrl, item.deviceName)"
				>
					<text class="u-collapse-content">{{ item.deviceName }}</text>
				</view>
			</u-collapse-item>
		</u-collapse>
		<!-- 选择区域 -->
		<u-picker closeOnClickOverlay :show="showArea" :loading="cityLoading" ref="cityPicker" :columns="cityColumns"
			@change="onChangeCity" @cancel="onCityCancel" @close="onCloseCity" keyName="areaName"
			@confirm="onCityConfirm"></u-picker>
	</view>
</template>

<script>
	import {
		getChildren
	} from '@/api/global'
	import {
		getDeviceList
	} from '@/api/video'
	import {
		AREA_ID
	} from '@/store/mutaction-types'
	
	export default {
		data() {
			return {
				areaId: uni.getStorageSync(AREA_ID),
				queryParam: {
					video_type: '0',
					deviceTypes: '5',
					deviceName: ''
				},
				showArea: false,
				videoList: [],
				showVideoList: [],
				allVideoList: [],
				showArea: false,
				cityColumns: [
					[],
					[]
				],
				cityLoading: false,
				page: 1,
				pageSize: 25
			}
		},
		onLoad (option) {
			this.queryParam.projectName = option.projectName
			uni.setNavigationBarTitle({
				title: this.queryParam.projectName
			})
		},
		mounted() {
			this.getvideoList()
		},
		onReachBottom() {
			uni.showLoading({
				title: '数据加载中'
			})
			this.page++
			const num = (this.page - 1) * this.pageSize
			const num2 = num + this.pageSize
			const list = this.allVideoList
			const list2 = list.slice(num, num2)
			this.showVideoList = this.showVideoList.concat(list2)
			setTimeout(() => {
				wx.hideLoading()
			}, 300)
		},
			// 下拉刷新
		onPullDownRefresh() {
			this.getvideoList()
			uni.stopPullDownRefresh()
		},
		methods: {
			open(e) {
			},
			close(e) {
			},
			change(e) {
			},
			// 获取列表
			getvideoList () {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				const app = this
				const areaIds = []
				let query = ''
				getChildren(app.areaId).then(areas => {
					const ids = areas.data.data
					for (const k in ids) {
						areaIds.push(ids[k].id)
					}
					this.areaIds = areaIds.join(',')
					for (const k in app.queryParam) {
						query += `&${k}=${app.queryParam[k]}`
					}
					getDeviceList(this.areaIds, query).then(res => {
						const list = res.data.data
						let pageData = list.slice(app.page - 1, app.pageSize)
						app.showVideoList = pageData
						app.allVideoList = res.data.data
					}).catch(error => {
						uni.$u.toast(error)
					}).finally(() => {
						uni.hideLoading()
					})
				})
			},
			// 选择某个项目执行的方法
			onCityConfirm(e) {
				this.queryParam.areaName = e.value[1].areaName
				this.queryParam.areaId = e.value[1].id
				this.showArea = false
				this.getPortal()
			},
			onChangeCity(e) {
				const {
					columnIndex,
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.cityPicker
				} = e
				if (columnIndex === 0) {
					this.cityLoading = true
					uni.$u.sleep(100).then(res => {
						picker.setColumnValues(1, this.areaList[e.index].children)
						this.reportLevOpts[0] = this.areaList[e.index].children
						this.cityLoading = false
					})
				}
			},
			onCityCancel() {
				this.showArea = false
			},
			onCloseCity(e) {
				this.showArea = false
			},
			onSearch() {
				this.getvideoList()
			},
			toVideo (url, name) {
				const data = { url: url, name: name }
				console.log(data)
				uni.navigateTo({
					url: '/packageB/video/videodetail?item=' + encodeURIComponent(JSON.stringify(data))
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-search {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fff;
		.list-input {
			width: 80%;
		}
		.list-btn {
			widht: 20%;
		}
	}
	.filter-item {
		flex-grow: 1;
		padding: 20upx 0;
		display: flex;
		font-size: 24upx;
		justify-content: center;
	}
	.u-collapse-content {
		position: relative;
		line-height: 60upx;
		padding-left: 34upx;
		&:before {
			position: absolute;
			left: 12upx;
			top: 14upx;
			width: 10upx;
			height: 10upx;
			border-radius: 4upx;
			background-color: #00aaff;
			content: '';
		}
	}
</style>
